.frame {
  height: 100%;
  width: 100%;

  .header-top {
    width: 100%;
    height: 0.72rem;
    background-color: #151d36;
  }

  .content-botton {
    position: relative;
    height: calc(~"100vh - 0.72rem");
    width: 100%;

    //&:after {
    //  content: "";
    //  display: table;
    //  clear: both;
    //}

    .left-menu {
      user-select: none;
      transition: width 0.28s;
      width: 2.5rem !important;
      position: fixed;
      font-size: 0px;
      top: 0.72rem;
      bottom: 0;
      left: 0;
      z-index: 1001;
      overflow: hidden;
      height: calc(~"100vh - 0.72rem");
    }

    .right-content {
      min-height: 100%;
      -webkit-transition: margin-left .28s;
      transition: margin-left .28s;
      margin-left: 2.5rem;
      position: relative;

      .header-box {
        height: 0.5rem;
      }

      .content {
        //  todo
        overflow: hidden;
        width: 100%;
        position: relative;
        height: calc(~"100vh - 1.22rem");
      }
    }



  }

  .hideSidebar {
    .left-menu {
      width: 0.64rem !important;
    }

    .right-content {
      margin-left: 0.64rem;
    }
  }

  // 修改elment默认
  .el-menu-item:focus,
  .el-menu-item:hover {
    // background-color: red;
    background-image: linear-gradient(45deg, #3da1f0, #9464c9);
    color: #fff;
  }

  .el-menu-item:hover i {
    color: #fff;
    transition: border-color .3s, background-color .3s, color .3s;
  }

  // 菜单项默认颜色
  .el-menu-item {
    color: #8397cb;
    background-color: #1a243e;
  }

  // 菜单中 icon 默认值
  .el-menu-item i {
    color: #8397cb;
  }

  // 菜单项选中状态
  .el-menu-item.is-active {
    background-image: linear-gradient(45deg, #3da1f0, #9464c9);
    color: #fff;
  }

  // 菜单项 icon 元素选中状态
  .el-menu-item.is-active i {
    color: #fff;
  }

  .el-submenu {
    background-color: #1a243e;
  }

  .el-submenu__title {
    color: #8397cb;
    background-color: #1a243e;
  }

  .el-submenu__title i {
    color: #8397cb;
  }
}
